<template>
	<view :class="[primarySize()]">
		<view class="page-foot bg-white">
			<view class="foot_nav" @click="bindSubmit">
				<view class="btn1">提交</view>
			</view>
		</view>
		<view class="container">
			<view class="page-head" v-if="!authStatus">
				<view class="tips" @click="bindTastAuth">请先进行实名认证，再发布需求></view>
			</view>
			<view :class="authStatus?'':'pt88'">
				<view class="p30">
					<view class="box1">
						<view class="inp_item flex-box">
							<view class="left">需求标题</view>
							<input type="text" placeholder="请输入" v-model="formData.name" class="flex-grow-1 inp"
								placeholder-class="colb" />
						</view>
						<!-- <picker class="inp_item" mode="selector"> -->
						<view class="inp_item flex-box" @click="bindCategoryShow()">
							<view class="left flex-grow-1">工种</view>
							<view class="fs30" :class="[formData.category_ids.length<=0?'colb':'col3']">
								{{formData.category_ids<=0?'请选择':'已选择'}}
							</view>

						</view>
						<!-- </picker> -->
						
						<view class="inp_item flex-box">
							<view class="left flex-grow-1">可议价</view>
							<view class="switch ml20" :class="item.id==formData.is_bargaining?'ac':''"
								@click="bindisBargainingChange(item.id)" v-for="(item,index) in isBargaining">
								{{item.name}}
							</view>

						</view>
						<view class="inp_item flex-box">
							<view class="left">招工人数</view>
							<input type="number" placeholder="请输入" v-model="formData.plan_count" class="flex-grow-1 inp"
								placeholder-class="colb" />
						</view>
						<view class="inp_item flex-box">
							<view class="left flex-grow-1">时间单位</view>
							<view class="switch ml20" :class="item.id==formData.unit?'ac':''"
								@click="bindUnitsChange(item.id)" v-for="(item,index) in units">{{item.name}}</view>

						</view>
						<view class="inp_item flex-box">
							<view class="left">劳动报酬</view>
							<input type="number" placeholder="请输入" v-model="formData.budget" class="flex-grow-1 inp"
								placeholder-class="colb" />
						</view>
						<view class="inp_item flex-box">
							<view class="left">时长</view>
							<input type="number" placeholder="请输入" v-model="formData.duration" class="flex-grow-1 inp"
								placeholder-class="colb" />
						</view>

					</view>
					<view class="box1 mt20">
						<view class="inp_item">
							<multi-select :items="areas" @change="bindDistrictsChange" id_key="id" name_key="name"
								max_level="3" :value="formData.district_id">
								<view class="inp_item flex-box">
									<view class="left flex-grow-1">工作区/县</view>
									<view class="fs30" :class="[!areaName?'colb':'col3']">
										{{areaName?areaName:'请选择'}}
									</view>
								</view>
							</multi-select>
						</view>
						<view class="inp_item flex-box">
							<view class="left">详细地址</view>
							<input type="text" placeholder="请输入" v-model="formData.address" class="flex-grow-1 inp"
								placeholder-class="colb" />
						</view>
						<view class="inp_item flex-box">
							<view class="left flex-grow-1">性别限制</view>
							<view class="switch ml20" :class="item.id==formData.gender?'ac':''"
								@click="bindGenderChange(item.id)" v-for="(item,index) in gender">{{item.name}}</view>

						</view>
						<view class="inp_item flex-box">
							<view class="left">开始工作日期</view>
							<input type="text" placeholder="请选择" @click="bindWorkTimeChange"
								v-model="formData.work_start_date" disabled="true" class="flex-grow-1 inp"
								placeholder-class="colb" />
						</view>
						<view class="inp_item flex-box">
							<view class="left">结束工作日期</view>
							<input type="text" placeholder="请选择" @click="bindEndWorkTimeChange"
								v-model="formData.work_end_date" disabled="true" class="flex-grow-1 inp"
								placeholder-class="colb" />
						</view>
						<view class="inp_item flex-box">
							<view class="left">每日上班时间</view>
							<input type="text" placeholder="请选择" @click="bindDateTimeChange"
								v-model="formData.work_start_time" disabled="true" class="flex-grow-1 inp"
								placeholder-class="colb" />
						</view>
						<view class="inp_item flex-box">
							<view class="left">每日下班时间</view>
							<input type="text" placeholder="请选择" @click="bindEndDateTimeChange"
								v-model="formData.work_end_time" disabled="true" class="flex-grow-1 inp"
								placeholder-class="colb" />
						</view>
					</view>
					<view class="box1 mt20">
						<view class="col3 fs30 pt30">工作内容</view>
						<textarea placeholder="请输入" class="textarea" v-model="formData.requirement"
							placeholder-class="colb"></textarea>
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="workTimeShow" mode="bottom" :safeAreaInsetBottom="false" @close="close1" bgColor="transparent">
			<view class="popup">
				<view class="plr40 fs36 fwb col6">开始工作日期</view>
				<picker-view v-if="workTimeShow" :indicator-style="indicatorStyle" :value="startValue"
					@change="bindStartChange" class="picker-view">
					<picker-view-column>
						<view class="item" :class="[startValue[0]==index?'active':'']"
							v-for="(item,index) in dateTimeArray1[0]" :key="index">
							{{item}}{{startValue[0]==index?'年':''}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" :class="[startValue[1]==index?'active':'']"
							v-for="(item,index) in dateTimeArray1[1]" :key="index">
							{{item}}{{startValue[1]==index?'月':''}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" :class="[startValue[2]==index?'active':'']"
							v-for="(item,index) in dateTimeArray1[2]" :key="index">
							{{item}}{{startValue[2]==index?'日':''}}
						</view>
					</picker-view-column>
					<!-- <picker-view-column>
						<view class="item" :class="[startValue[3]==index?'active':'']"
							v-for="(item,index) in dateTimeArray1[3]" :key="index">
							{{item}}{{startValue[3]==index?'点':''}}
						</view>
					</picker-view-column> -->
				</picker-view>
				<view class="p30" @click="onTimeSubmit">
					<view class="btn1">提交开始日期</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="endTimeShow" mode="bottom" :safeAreaInsetBottom="false" @close="close2" bgColor="transparent">
			<view class="popup">
				<view class="plr40 fs36 fwb col6">结束工作日期</view>
				<picker-view v-if="endTimeShow" :indicator-style="indicatorStyle" :value="endValue"
					@change="bindEndChange" class="picker-view">
					<picker-view-column>
						<view class="item" :class="[endValue[0]==index?'active':'']"
							v-for="(item,index) in dateTimeArray2[0]" :key="index">{{item}}{{endValue[0]==index?'年':''}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" :class="[endValue[1]==index?'active':'']"
							v-for="(item,index) in dateTimeArray2[1]" :key="index">{{item}}{{endValue[1]==index?'月':''}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" :class="[endValue[2]==index?'active':'']"
							v-for="(item,index) in dateTimeArray2[2]" :key="index">{{item}}{{endValue[2]==index?'日':''}}
						</view>
					</picker-view-column>
					<!-- <picker-view-column>
						<view class="item" :class="[endValue[3]==index?'active':'']" v-for="(item,index) in dateTimeArray1[3]"
							:key="index">{{item}}{{endValue[3]==index?'点':''}}</view>
					</picker-view-column> -->
				</picker-view>
				<view class="p30" @click="onEndTimeSubmit">
					<view class="btn1">提交结束日期</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="workDateShow" mode="bottom" :safeAreaInsetBottom="false" @close="close3" bgColor="transparent">
			<view class="popup">
				<view class="plr40 fs36 fwb col6">上班时间</view>
				<picker-view v-if="workDateShow" :indicator-style="indicatorStyle" :value="startDateValue"
					@change="bindStartDateChange" class="picker-view">
					<picker-view-column>
						<view class="item" :class="[startDateValue[0]==index?'active':'']"
							v-for="(item,index) in dateTimeArray3[0]" :key="index">
							{{item}}{{startDateValue[0]==index?'时':''}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" :class="[startDateValue[1]==index?'active':'']"
							v-for="(item,index) in dateTimeArray3[1]" :key="index">
							{{item}}{{startDateValue[1]==index?'分':''}}
						</view>
					</picker-view-column>
				</picker-view>
				<view class="p30" @click="onStartDateSubmit">
					<view class="btn1">提交上班时间</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="endDateShow" mode="bottom" :safeAreaInsetBottom="false" @close="close4" bgColor="transparent">
			<view class="popup">
				<view class="plr40 fs36 fwb col6">下班时间</view>
				<picker-view v-if="endDateShow" :indicator-style="indicatorStyle" :value="endDateValue"
					@change="bindEndDateChange" class="picker-view">
					<picker-view-column>
						<view class="item" :class="[endDateValue[0]==index?'active':'']"
							v-for="(item,index) in dateTimeArray4[0]" :key="index">
							{{item}}{{endDateValue[0]==index?'时':''}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" :class="[endDateValue[1]==index?'active':'']"
							v-for="(item,index) in dateTimeArray4[1]" :key="index">
							{{item}}{{endDateValue[1]==index?'分':''}}
						</view>
					</picker-view-column>
				</picker-view>
				<view class="p30" @click="onEndDateSubmit">
					<view class="btn1">提交下班时间</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="categoryShow" mode="bottom" :safeAreaInsetBottom="false" @close="bindCategoryCancel"
			bgColor="transparent">
			<view class="popup1">
				<view class="fs36 fwb col6 lh50">选择工种（多选）</view>
				<scroll-view scroll-y="true" class="pop_scroll">
					<view class="scroll_item" @click="bindCategoryChange(item.id)"
						:class="{ac: formData.category_ids.includes(item.id)}" v-for="(item,index) in taskCategory">
						{{item.name}}
					</view>
				</scroll-view>
				<view class="pop_btn" @click="bindCategoryShow()">提交</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	const app = getApp();
	import multiSelect from '@/components/multi-select/multi-select.vue';
	var validate = require("../../xilu/validate.js");
	var dateTimePicker = require('@/xilu/dateTimePicker.js')
	export default {
		components: {
			multiSelect
		},
		data() {
			return {

				show: false,
				year: null,
				month: null,
				day: null,
				hour: null,
				endyear: null,
				endmonth: null,
				endday: null,
				endhour: null,
				startyear: 2025,
				endyear: 2060,
				dateTimeArray1: null,
				dateTimeArray2: null,
				dateTimeArray3: null,
				dateTimeArray4: null,
				startValue: [0, 0, 0],
				endValue: [0, 0, 0],
				startDateValue: [0, 0],
				endDateValue: [0, 0],
				visible: false,
				indicatorStyle: `height: 65px;background:rgba(42, 126, 244, .1);`,

				taskCategory: [],
				categoryShow: false,
				isBargaining: [{
					id: 1,
					name: '是'
				}, {
					id: 2,
					name: '否'
				}],
				units: [{
					id: 1,
					name: '小时'
				}, {
					id: 2,
					name: '天'
				}, {
					id: 3,
					name: '月'
				}],
				gender: [{
					id: 0,
					name: '不限'
				}, {
					id: 1,
					name: '男'
				}, {
					id: 2,
					name: '女'
				}],
				areas: [],
				areaName: '',
				workTimeShow: false,
				endTimeShow: false,
				formData: {
					name: '',
					category_ids: [],
					budget: '',
					is_bargaining: 1,
					plan_count: '',
					unit: 1,
					duration: '',
					district_id: 0,
					address: '',
					gender: 0,
					work_start_date: '',
					work_end_date: '',
					work_start_time: '',
					work_end_time: '',
					requirement: ''
				},
				work_start_time: '',
				work_end_time: '',
				date_start_time: '',
				date_end_time: '',
				workDateShow: false,
				endDateShow: false,
				authStatus: true
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad(options) {

			let page = this;
			if (options.id) {
				this.$core.get({
					url: 'xilujob.task/edit/id/' + options.id,
					success(ret) {
						page.formData = ret.data;
					}
				})
			}
			this.$core.get({
				url: 'xilujob.task/add',
				loading: false,
				success(ret) {
					page.authStatus = ret.data.auth_status;
				}
			})
			//工种
			this.$util.getTastCategory(false).then(items => {
				this.taskCategory = items;
			});
			//区县
			this.$util.getAreasTree(false).then(areas => {
				this.areas = areas;
			});
			this.getTimePicker()
		},
		onShow(){
			let page = this;
			this.$core.get({
				url: 'xilujob.task/add',
				loading: false,
				success(ret) {
					page.authStatus = ret.data.auth_status;
				}
			})
		},
		methods: {
			//认证
			bindTastAuth() {
				let page = this;
				uni.navigateTo({
					url: '/pages/public/individual_employer_registration',
					events: {
						taskAuthSuccess: data => {
							
						}
					},
				})
			},
			bindCategoryShow() {
				this.categoryShow = !this.categoryShow;
			},
			bindCategoryCancel() {
				this.categoryShow = !this.categoryShow;
				this.formData.category_ids = [];
			},
			bindCategoryChange(id) {
				if (!this.formData.category_ids.includes(id)) {
					this.formData.category_ids.push(id);
				} else {
					this.formData.category_ids.splice(this.formData.category_ids.indexOf(id), 1);
				}
			},
			bindisBargainingChange(id) {
				this.formData.is_bargaining = id;
			},
			bindUnitsChange(id) {
				this.formData.unit = id;
			},
			bindGenderChange(id) {
				this.formData.gender = id;
			},
			bindDistrictsChange(event) {
				this.areaName = event.items.map(item => item.name).join(',');
				this.formData.province_id = event.items[0].id;
				this.formData.city_id = event.items[1].id;
				this.formData.district_id = event.items[2].id;
				this.$forceUpdate()
			},
			bindWorkTimeChange() {
				this.workTimeShow = !this.workTimeShow;
			},

			onTimeSubmit() {
				this.formData.work_start_date = this.work_start_time;
				this.workTimeShow = false;
			},
			onStartDateSubmit() {
				this.formData.work_start_time = this.date_start_time;
				this.workDateShow = false;
			},
			onEndDateSubmit() {
				this.formData.work_end_time = this.date_end_time;
				this.endDateShow = false;
			},
			bindEndWorkTimeChange() {
				this.endTimeShow = !this.endTimeShow;
			},
			onEndTimeSubmit() {
				this.formData.work_end_date = this.work_end_time;
				this.endTimeShow = false;
			},
			bindSubmit(event) {
				let page = this;
				let data = this.formData;
				var rule = [{
						name: 'name',
						rules: ['require'],
						errorMsg: {
							require: '请填写需求标题'
						}
					},
					{
						name: 'budget',
						rules: ['require', 'number'],
						errorMsg: {
							require: '请填写劳动报酬',
							number: '劳动报酬必须是数字整数'
						}
					},
					{
						name: 'plan_count',
						rules: ['require', 'gt:0'],
						errorMsg: {
							require: '请填写招聘人数',
							gt:'请填写招聘人数'
						}
					},
					{
						name: 'duration',
						rules: ['require', 'gt:0'],
						errorMsg: {
							require: '请填写时长',
							gt: '请填写时长'
						}
					},
					{
						name: 'district_id',
						rules: ['require', 'gt:0'],
						errorMsg: {
							require: '请填写工作区/县',
							gt: '请填写工作区/县'
						}
					},
					{
						name: 'address',
						rules: ['require'],
						errorMsg: {
							require: '请填写详细地址'
						}
					},
					{
						name: 'gender',
						rules: ['egt:0'],
						errorMsg: {
							gt: '请选择性别限制'
						}
					},
					{
						name: 'work_start_time',
						rules: ['require'],
						errorMsg: {
							require: '请选择工作时间'
						}
					},
					{
						name: 'work_end_time',
						rules: ['require'],
						errorMsg: {
							require: '请选择工作时间'
						}
					},
					{
						name: 'requirement',
						rules: ['require'],
						errorMsg: {
							require: '请填写工作需求'
						}
					},
				];
				// 是否全部通过，返回Boolean
				if (!validate.check(data, rule)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}
				if (!this.formData.id) {
					this.$core.post({
						url: 'xilujob.task/add',
						data: data,
						success: ret => {
							uni.showModal({
								title: '提示',
								content: ret.msg,
								showCancel: false,
								success() {
									page.getOpenerEventChannel().emit("taskCreate", ret.data);
									uni.navigateBack();
								}
							})

						}
					});
				} else {
					this.$core.post({
						url: 'xilujob.task/edit/id/' + this.formData.id,
						data: data,
						success: ret => {
							uni.showModal({
								title: '提示',
								content: ret.msg,
								showCancel: false,
								success() {
									page.getOpenerEventChannel().emit("taskUpdate", {
										task: ret.data
									});
									uni.navigateBack();
								}
							})

						}
					});
				}
			},
			close1() {
				this.workTimeShow = false
			},
			close2() {
				this.endTimeShow = false
			},
			close3() {
				this.workDateShow = false
			},
			close4() {
				this.endDateShow = false
			},
			bindStartChange: function(e) {
				var dateArr = this.dateTimeArray1;
				const val = e.detail.value
				this.year = dateArr[0][val[0]]
				this.month = dateArr[1][val[1]]
				dateArr[2] = dateTimePicker.getMonthDay(this.year, this.month);
				this.dateTimeArray1 = dateArr
				this.startValue = val;
				this.work_start_time = this.dateTimeArray1[0][this.startValue[0]] + '-' + this.dateTimeArray1[1][this
					.startValue[1]
				] + '-' + this.dateTimeArray1[2][this.startValue[2]];

			},
			bindEndChange: function(e) {
				var dateArr1 = this.dateTimeArray2;
				const val = e.detail.value
				this.endyear = dateArr1[0][val[0]]
				this.endmonth = dateArr1[1][val[1]]
				dateArr1[2] = dateTimePicker.getMonthDay(this.endyear, this.endmonth);
				this.dateTimeArray1 = dateArr1
				this.endValue = val;
				this.work_end_time = this.dateTimeArray2[0][this.endValue[0]] + '-' + this.dateTimeArray2[1][this
					.endValue[1]
				] + '-' + this.dateTimeArray2[2][this.endValue[2]];
			},
			// 上班时间选择器开关
			bindDateTimeChange() {
				this.workDateShow = !this.workDateShow
			},
			// 下班时间选择器开关
			bindEndDateTimeChange() {
				this.endDateShow = !this.endDateShow
			},
			// 上班时间选择器选择
			bindStartDateChange: function(e) {
				var dateArr3 = this.dateTimeArray3;
				const val = e.detail.value;
				this.startDateValue = val;
				this.date_start_time = this.dateTimeArray3[0][this.startDateValue[0]] + ':' + this.dateTimeArray3[1][
					this.startDateValue[1]
				];

			},
			// 下班时间选择器选择
			bindEndDateChange: function(e) {
				var dateArr4 = this.dateTimeArray4;
				const val = e.detail.value;
				this.endDateValue = val;
				this.date_end_time = this.dateTimeArray4[0][this.endDateValue[0]] + ':' + this.dateTimeArray4[1][
					this.endDateValue[1]
				];

			},
			getTimePicker() {
				let obj = dateTimePicker.dateTimePicker(this.startyear, this.endyear);
				let obj1 = dateTimePicker.dateTimePicker3(this.startyear, this.endyear);
				this.dateTimeArray1 = obj.dateTimeArray;
				this.dateTimeArray2 = obj.dateTimeArray;
				this.dateTimeArray3 = obj1.dateTimeArray;
				this.dateTimeArray4 = obj1.dateTimeArray;
				let newTime = dateTimePicker.getNewDateArry();
				let newDateTime = dateTimePicker.getNewDateArry3();
				newTime[0] = newTime[0] - this.startyear;
				// 年月日
				this.startValue = newTime;
				this.endValue = newTime;
				// 时分
				this.startDateValue = newDateTime;
				this.endDateValue = newDateTime;
				// 年月日
				this.work_start_time = this.dateTimeArray1[0][this.startValue[0]] + '-' + this.dateTimeArray1[1][this
					.startValue[1]
				] + '-' + this.dateTimeArray1[2][this.startValue[2]];
				this.work_end_time = this.dateTimeArray2[0][this.endValue[0]] + '-' + this.dateTimeArray2[1][this.endValue[
					1]] + '-' + this.dateTimeArray2[2][this.endValue[2]];
				// 时分
				this.date_start_time = this.dateTimeArray3[0][this.startDateValue[0]] + ':' + this.dateTimeArray3[1][this
					.startDateValue[1]
				];
				this.date_end_time = this.dateTimeArray4[0][this.endDateValue[0]] + ':' + this.dateTimeArray4[1][this
					.endDateValue[1]
				];
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-head {
		background: var(--primary);

		.tab_item {
			width: 50%;
			height: 88rpx;
			line-height: 88rpx;
			display: inline-block;
			vertical-align: top;
			font-size: 26rpx;
			color: #FFFFFF;
			position: relative;
			text-align: center;

			&.active {
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
			}

			&.active::after {
				content: '';
				width: 36rpx;
				height: 6rpx;
				background: #FFFFFF;
				border-radius: 4rpx;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				position: absolute;
			}
		}

		.tips {
			width: 750rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #FF9A19;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.pt88 {
		padding-top: 88rpx;
	}

	.pt88 {
		padding-top: 88rpx;
	}

	.box1 {
		width: 690rpx;
		padding: 10rpx 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;

		.inp_item+.inp_item {
			border-top: 1px solid #E7E7E7;
		}

		.inp_item {
			height: 110rpx;
		}

		.left {
			font-size: 30rpx;
			color: #333333;
		}

		.inp {
			text-align: right;
			padding-left: 30rpx;
			color: #333;
			font-size: 30rpx;
		}

		.switch {
			width: 102rpx;
			height: 53rpx;
			line-height: 53rpx;
			text-align: center;
			font-size: 30rpx;
			color: #666666;
			background: #EFF0F2;
			border-radius: 27rpx;

			&.ac {
				background: var(--primary);
				color: #FFFFFF;
			}
		}
	}

	.textarea {
		width: 100%;
		padding: 30rpx 0 0;
		font-size: 30rpx;
		color: #333333;
	}

	.foot_nav {
		padding: 10rpx 30rpx;
	}

	.btn1 {
		height: 82rpx;
		line-height: 82rpx;
		font-size: 30rpx;
	}

	.popup {
		width: 750rpx;
		padding-top: 40rpx;
		background: #FFFFFF;

		.picker-view {
			width: 750rpx;
			height: 530rpx;
			margin-top: 40rpx;
		}

		.item {
			line-height: 130rpx;
			text-align: center;
			font-size: 32rpx;
			color: #666666;
		}

		.item.active {
			font-weight: bold;
			font-size: 36rpx;
			color: var(--primary);
		}
	}

	.popup1 {
		width: 749rpx;
		height: 783rpx;
		background: #FFFFFF;
		padding: 40rpx 30rpx 10rpx;

		.pop_scroll {
			height: 590rpx;
			width: 100%;
			padding-top: 34rpx;

			.scroll_item {
				width: 210rpx;
				height: 65rpx;
				line-height: calc(65rpx - 2px);
				text-align: center;
				padding: 0 8rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 1px solid #C6C6C6;
				display: inline-block;
				vertical-align: top;
				margin-right: 29rpx;
				margin-top: 24rpx;
			}

			.scroll_item:nth-of-type(3n) {
				margin-right: 0;
			}

			.scroll_item:nth-of-type(-n+3) {
				margin-top: 0;
			}

			.scroll_item.ac {
				color: var(--primary);
				border: 1px solid var(--primary);
			}
		}

		.pop_btn {
			width: 690rpx;
			height: 82rpx;
			line-height: 82rpx;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			background: var(--primary);
			border-radius: 8rpx;
			margin-top: 10rpx;
		}
	}
</style>